<template>
	<view class="shopping">
		<view class="top headline">
			<i class="cubeic-back"></i>
			购物车
			<text v-show="order_list.length>0&&!is_amend" @click="is_amend = !is_amend">编辑</text>
			<text v-show="order_list.length>0&&is_amend" @click="is_amend = !is_amend">完成</text>
		</view>
			<view class="list" v-for="(item, index) in order_list" :key="index">
				<view class="checkbox">
					<label class="label-2" :class="{ active: item.status&&item.status.value==2 }" @click="selectItem(item)"><image src="/static/img/checked_box.png" /></label>
				</view>
				<view class="message" @click="go_good(item.goodsId)">
					<image :src="item.img" class="imgthumb" mode="aspectFill"/>
					<view class="text">
						<p class="title">{{ item.goodsName }}</p>
						<p class="trait">颜色：{{ item.productSkuDesplist[0].split(':')[1] }}</p>
						<p class="trait">尺码：{{ item.productSkuDesplist[1].split(':')[1] }}</p>
						<p class="price">￥{{ item.discountPrice }}</p>
						<view class="delete"></view>
					</view>
				</view>
			</view>
		<view v-if="order_list.length>0&&!is_amend" class="statistics">
				<view class="checked" @click="all()">
					<label class="label-2" :class="{ active: is_all }"><image src="/static/img/checked_box.png" /></label>
				</view>
			合计：
			<text class="price">￥{{price}}（{{list}}件）</text>
			<text class="tip">不含运费</text>
			<view class="sub" @click="sub()">结算</view>
		</view>
		<view v-if="order_list.length>0&&is_amend" class="statistics">
				<view class="checked" @click="all()">
					<label class="label-2" :class="{ active: is_all }" ><image src="/static/img/checked_box.png" /></label>
				</view>
			<view class="move" @click="collect()">移入收藏夹</view>
			<view class="remove" @click="remove()">删 除</view>
		</view>
		
		<view v-if="order_list.length==0" class="notavailable">
			<image src="../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
	</view>
</template>

<script>
import shoppingtrolley from '../../servers/shop/shoppingtrolley.js';
export default {
	props: ['paging'],
	data() {
		return {
			order_list: [],
			list:0,
			price:0,
			login:'',
			is_all: false,
			is_go_top: false,
			is_amend: false
		};
	},
	onPageScroll: function(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 200) {
			this.is_go_top = true;
		} else {
			this.is_go_top = false;
		}
	},
	onShow() {
		var _this = this;
		this.login = uni.getStorageSync('login');
		if (this.login) {
			_this.goorder();
			console.log('aaa')
		}else{
			uni.navigateTo({
				url: '/pages/shop/account/login'
			});
		}
	},
	methods: {
		goorder() {
			shoppingtrolley
				.initData()
				.then(res => {
					this.order_list = res.data.map(v => {
						v.img = this.imgCDNUrl + v.img;
						if(v.productSkuDesp){
							v.productSkuDesplist = v.productSkuDesp.split(',');
						}
						
						return v;
					});
					this.calculate()
				})
				.catch(err => {
					console.log(err)
					console.log(new Error('请检查网络后重试'));
				});
		},
		go_good(e) {
		    this.commonality.route_baling('/pages/shop/commodity/particulars', 'shopId', e);
		   },
		all(e) {
			if(this.is_all){
				shoppingtrolley.cancelAllItem().then(res => {
					this.goorder();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			}else{
				shoppingtrolley.selectAllItem().then(res => {
					this.goorder();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			}
		},
		selectItem(e){
			if(e.status&&e.status.value===2){
		
				shoppingtrolley.cancelItem(e.id).then(res => {
					this.goorder();
				})
				.catch(err => {
					console.log(err)
					console.log(new Error('请检查网络后重试'));
				});
			}else{
				shoppingtrolley.selectItem(e.id).then(res => {
					this.goorder();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			}
		},
		checkboxChange(e) {
			var items = this.order_list,
				values = e.detail.value;
			for (var i = 0; i < items.length; ++i) {
				const item = items[i];
				if (values.includes(String(i))) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
			if (items.length == values.length) {
				this.is_all = true;
			} else {
				this.is_all = false;
			}
			this.calculate()
		},
		calculate(){
			var list = 0;
			var	price = 0;
			this.order_list.map(v=>{
				if(v.status.value==2){
					list+=1
					price+=v.price
				}
			})
			this.list=list
			this.price=price.toFixed(2)
			if(list==this.order_list.length){
				this.is_all= true
			}else{
				this.is_all= false
			}
		},
		collect(){
			var da = this.order_list
			var collects = ''
			for (var i=0;i<da.length;i++) {
				if(da[i].status.value==2){
					if(collects){
						collects+=(',')
					}
					collects+=da[i].productId
				}
			}
			console.log(collects); 
			shoppingtrolley.saveBatch(collects).then(res => {
					uni.showToast({
					    title: '收藏成功',
					    duration: 2000
					});
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		remove(){
			var da = this.order_list
			var remover = ''
			for (var i=0;i<da.length;i++) {
				if(da[i].status.value==2){
					if(remover){
						remover+=(',')
					}
					remover+=da[i].id
					// this.order_list.splice(i,1);
				}
			}
			console.log(remover);
			shoppingtrolley.delBatch(remover).then(res => {
					if(res.code==200){
						uni.showToast({
							title:'删除成功'
						})
						this.goorder();
					}
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		sub(){
			var da = this.order_list
			var da1= []
			da.map(v=>{
				if(v.status.value==2){
					v.from='car'
					da1.push(v)
				}
			})
			if(!da1[0]){
				uni.showToast({
				    title: '请选择结算商品',
				    duration: 2000
				});
				return
			}
					if(da1.length!=1){
							uni.showToast({
							    title: '只允许选择一件商品',
							    duration: 2000,
								icon:'none'
							});
							return
						}
			uni.setStorage({
			    key: 'shop',
			    data: da1,
			    success: function () {
					uni.navigateTo({
						url: '/pages/shop/order/affirm'
					});
			    }
			});
		},
		// 计算距离顶部的高度，均分10等分，
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		}
	}
};
</script>
<style lang="less" scoped>
.shopping {
	padding-bottom: 110px;
	padding-top: var(--status-bar-height);
	.headline {
		text {
			position: absolute;
			top: 5px;
			right: 10px;
			font-size: 14px;
		}
		// #ifdef MP-WEIXIN
		text {
			left: 20rpx;
			right: auto;
		}
		// #endif
	}
	.list {
		display: flex;
		padding: 44rpx 0;
		background: #ffffff;
		border-bottom: 1rpx solid #efefef; /*no*/
		.checked-box {
			display: none;
		}
		.label-2 {
			display: block;
			width: 44rpx;
			height: 44rpx;
			margin: 84rpx 31rpx;
			border: 1px solid #bd3c8c;
			box-sizing: border-box;
			border-radius: 50%;
			image {
				width: 44rpx;
				height: 44rpx;
				display: none;
				margin: -1px;
			}
		}
		.label-2.active {
			background: #fff;
			image {
				display: block;
			}
		}
		.message {
			display: flex;
			.imgthumb {
				width: 218rpx;
				height: 220rpx;
				margin: 0 32rpx 0 20rpx;
				border-radius: 10rpx;
			}
			.text {
				flex: 1;
				.title {
					font-size: 28rpx;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.trait {
					font-size: 26rpx;
					color: #999;
				}
				.price {
					font-size: 30rpx;
					color: #bd3c8c;
				}
			}
		}
	}
	li:nth-last-child(1) {
		border-bottom: none;
	}
	.statistics {
		position: fixed;
		// #ifdef H5
		bottom: 50px;
		// #endif
		// #ifndef H5
		bottom: 0px;
		// #endif
		line-height: 60px;
		height: 60px;
		width: 100%;
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-top: 1px solid #efefef; /*no*/
		background: #ffffff;
		.price {
			font-size: 32rpx;
			color: #bd3c8c;
		}
		.tip {
			color: #999;
			flex: 1;
		}
		view {
			position: relative;
			width: 195rpx;
			height: 40px;
			line-height: 40px;
			border-radius: 40px;
			text-align: center;
			font-size: 30rpx;
		}
		.sub {
			top: 10px;
			width: 193rpx;
			height: 40px;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			color: #fff;
			line-height: 40px;
		}
		.cube-checkbox {
			position: relative;
			flex: 1;
			top: 20px;
		}
		.move {
			color: #bd3c8c;
			border: 1px solid #bd3c8c; /*no*/
			top: 30rpx;
		}
		.remove {
			color: #666666;
			border: 1px solid #666666; /*no*/
			top: 30rpx;
			margin-left: 35rpx;
		}
		.checked {
			width: 30px;
			.checked-box {
				display: none;
			}
			.label-2 {
				display: block;
				width: 22px;
				height: 22px;
				margin: 18px 1rpx;
				border: 1px solid #bd3c8c;
				box-sizing: border-box;
				border-radius: 50%;
				image {
					width: 22px;
					height: 22px;
					display: none;
					margin: -1px;
				}
			}
			.label-2.active {
				background: #fff;
				image {
					display: block;
				}
			}
		}
	}
	.go-top {
		bottom: 300rpx;
	}
}
</style>
